<template>
  <div>
    <van-nav-bar title="已结束会议" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="van_card">
      <div class="van_card_title eventnumber">会议编号：{{this.eventid}}</div>
      <div
        v-if="passengerOrderData.length==0"
        class="van_card_title warning_title"
      >会议结算信息待会议结束日期后10个工作日才能显示。</div>
      <div class="van_card_title">费用结算</div>
      <table class="meeting_table">
        <thead>
          <tr>
            <th>总金额</th>
            <th>平均折扣率</th>
            <th>平均改期率</th>
            <th>平均退票率</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in summaryData" :key="index">
            <td>{{item.gross}}</td>
            <td>{{item.averageDiscount}}</td>
            <td>{{item.averageReissue}}</td>
            <td>{{item.averageRefund}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="van_card">
      <table class="passagender_table">
        <thead>
          <tr>
            <th>乘机人姓名</th>
            <th>产品类别</th>

            <th style="width:50%">
              <van-popover  placement="top" v-model="showPopover" trigger="click" >
                <span class="content">票价+燃油机建等税费+服务手续费+退票手续费（若是退票）</span>
                <template #reference>
                  <span >结算金额</span>
                </template>
              </van-popover>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in passengerOrderData" :key="index">
            <td>{{item.ConName}}</td>
            <td>{{item.ExpCate}}</td>
            <td>{{item.Amount}}</td>
          </tr>
        </tbody>
      </table>
      <div v-if="passengerOrderData.length!==0" class="sendEmail">
        <van-form @submit="onSubmit" :show-error="false">
          <van-field
            v-model="username"
            label="填写您的邮箱"
            placeholder="请输入您的邮箱"
            :rules="[{validator, required: true, message: '请填写正确的邮箱地址' }]"
          />
          <div>
            <van-button size="small" type="info">发送费用明细至邮箱</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import apilist from "../utils/apiList";
export default {
  data() {
    return {
      showPopover: false,
      username: "",
      eventid: "",
      summaryData: [],
      passengerOrderData: [],
      passengerOrderData2: [],
    };
  },
  created() {
    this.eventid = this.$route.query.eventid;
    this.getstopmeetingInfo();
  },
  methods: {
    async getstopmeetingInfo() {
      const res = await this.$axios({
        method: "get",
        url: apilist[0] + "/GetEvent?eventid=" + this.eventid,
        noloading: true,
      });
      console.log(res.data.IDNo);
      const res1 = await this.$axios({
        method: "get",
        url: apilist[1] + "/GetEventFeeJSONByEventid?eventid=" + res.data.IDNo,
        noloading: true,
      });

      let allp = 0;
      let ed = res1.data;
      let all_disc = 0;
      let tkt = [0, 0, 0];
      ed.map((v, i) => {
        allp += v.Amount;
        all_disc += v.DiscountRate;
        if (v.ExpType == "正票") {
          tkt[0]++;
        } else if (v.ExpType == "改签") {
          tkt[1]++;
        } else if (v.ExpType == "退票损失") {
          tkt[2]++;
        }
      });
      this.summaryData = [
        {
          gross: this.toMoney(allp),
          averageDiscount:
            ((all_disc / ((ed.length || 1) * 100)) * 100).toFixed(2) + "%",
          averageReissue: ((tkt[1] / (ed.length || 1)) * 100).toFixed(2) + "%",
          averageRefund: ((tkt[2] / (ed.length || 1)) * 100).toFixed(2) + "%",
        },
      ];
      this.passengerOrderData = ed;
      const res2 = await this.$axios.get(
        apilist[1] +
          "/GetStaffTripsByEventID?eventid=" +
          res.data.IDNo +
          "&start=2020-10-01&end=2021-10-01"
      );
      // 要修改的信息还没有改
      // console.log(res2.data);
      // res2.data.map((v, i) => {
      //   this.passengerOrderData.map((v2, i2) =>{});
      // });
    },
    toMoney: function (num) {
      num = parseFloat(num) + "";
      let x = num.split(".");
      let y = (x[0] || 0).toString();
      let z = x[1];

      let result = "";
      while (y.length > 3) {
        result = "," + y.slice(-3) + result;
        y = y.slice(0, y.length - 3);
      }
      if (y) {
        result = y + result;
      }
      y = result;
      if (z) {
        if (z.length >= 2) {
          return y + "." + z.substr(0, 2);
        } else if (z.length == 1) {
          return y + "." + z + "0";
        } else if (z.length == 0) {
          return y + "." + "00";
        }
      } else {
        return y + ".00";
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    // 发送会议
    validator(val) {
      let reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
      return reg.test(val);
    },
    onSubmit() {
      this.$axios
        .get(
          apilist[1] +
            "/SendInvoiceEmail?mail=" +
            this.username +
            "&mail_title=" +
            this.eventid +
            "_会议费用明细"
        )
        .then((res) => {
          if (res.status == 200) {
            this.$notify({
              type: "success",
              message: "邮件发送成功",
            });
            this.username = "";
          }
        });
    },
  },
};
</script>

<style scoped lang="less">
table,
table tr th,
table tr td {
  border: 1px solid #dcdfe6;
  height: 40px;
}
.warning_title {
  color: red;
}
.content{
  display: block;
  padding: 10px;
}
.meeting_table,
.passagender_table {
  font-size: 12px;
  width: 100%;
  text-align: center;

  thead {
    tr {
      background: #eee;
      font-size: 14px;
      .index {
        width: 13%;
      }
    }
  }
  tr {
    th {
      text-align: center;
    }
  }
}
</style>